<template>
    <div class="page-footer">
        <van-tabbar v-model="active" route placeholder>
            <van-tabbar-item to="/home">
                <span>首页</span>
                <template #icon="props">
                    <img
                        :src="props.active ? require('@/assets/img/footer/HomeIcon-active.png') : require('@/assets/img/footer/HomeIcon.png')"
                    />
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/category">
                <span>分类</span>
                <template #icon="props">
                    <img
                        :src="props.active ? require('@/assets/img/footer/Category-active.png') : require('@/assets/img/footer/Category.png')"
                    />
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/cart">
                <span>购物车</span>
                <template #icon="props">
                    <img
                        :src="props.active ? require('@/assets/img/footer/Cart-active.png') : require('@/assets/img/footer/Cart.png')"
                    />
                </template>
                <i class="tag-count" v-if="showCartCount && totalItemCount !== 0">{{ totalItemCount | over99 }}</i>
            </van-tabbar-item>
            <van-tabbar-item to="/user">
                <span>个人中心</span>
                <template #icon="props">
                    <img
                        :src="props.active ? require('@/assets/img/footer/User-active.png') : require('@/assets/img/footer/User.png')"
                    />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const cartStore = createNamespacedHelpers('cart')
export default {
    data () {
        return {
            active: 0,
            showCartCount: false
        }
    },
    computed: {
        ...cartStore.mapGetters(['totalItemCount'])
    },
    beforeRouteEnter (to, from, next) {
        next(vm => {
            // console.log(vm)
            if (vm.$route.path.includes('cart')) {
                vm.showCartCount = true
            } else {
                vm.showCartCount = false
            }
            next()
        })
    }
}
</script>

<style lang="scss">
.page-footer {
    .van-tabbar{
        border-top: 1px solid #c3c3c3;
        box-sizing: border-box;
        padding: 0 35px;
        height: 56px;
        .van-tabbar-item {
            font-size: 10px;
            position: relative;
            &--active {
                color: #d44d44;
            }
            .van-tabbar-item__icon {
                img {
                    height: 27px;
                }
            }
            .tag-count {
                display: block;
                position: absolute;
                top: 1px;
                right: 15px;
                width: 20px;
                height: 20px;
                background-color: #c63b39;
                border-radius: 50%;
                font-size: 8px;
                font-weight: bold;
                color: #fff;
                text-align: center;
                line-height: 20px;
                z-index: 3;
            }
        }
    }
}
</style>
